<template>
  <div class="role-manage">
    <search-table :url="url" ref="searchtable" :columns="columns" :form="form">

      <template slot="searchForm">
        <a-form layout="inline" :form="form">
          <a-form-item label="角色名">
            <a-input
              v-decorator="[
                'name',
              ]"
              placeholder="请输入角色名称"
            >
            </a-input>
          </a-form-item>
        </a-form>
      </template>
      <template slot="oprationRow">
        <permission authority="roles:add">
          <a-button type="primary" icon="plus" @click="openInfo()">添加</a-button>
        </permission>
        <permission authority="roles:delete">
          <a-button @click="deleteRows(selectedRowKeys)" type="primary" icon="delete">删除</a-button>
        </permission>
      </template>
      <template slot="tableOperation" slot-scope="{record}">
        <permission authority="permissions:delete">
          <span class="text-primary pointer" @click="openInfo(record)">修改</span>
        </permission>
        <a-divider type="vertical" />
        <permission authority="permissions:delete">
          <span class="text-danger pointer" @click="deleteRows([record.id])">删除</span>
        </permission>
        <a-divider type="vertical" />
        <permission authority="roles:permissions:list">
          <span class="text-primary pointer" @click="openPermission(record)">权限设置</span>
        </permission>
      </template>
    </search-table>
    <role-info  :record="currentRecord" @cancel="closeInfoModal" :visible="infoVisible" />
    <set-permission :record="currentRecord" @cancel="closePermissionModal" :visible="permissionVisible" />
  </div>
</template>
<script>
import RoleInfo from './components/RoleInfo'
import SetPermission from './components/SetPermission'
export default {
  name: 'Role',
  data () {
    return {
      url: '/sys/roles',
      infoVisible: false,
      permissionVisible: false,
      currentRecord: {},
      form: this.$form.createForm(this, { name: 'table_search' }),

      columns: [{
          title: '角色名称',
          dataIndex: 'name',
          key: 'name'
        },
        {
          title: '创建时间',
          dataIndex: 'createDate',
          key: 'createDate'
        },
        {
          title: '操作',
          dataIndex: 'operation',
          scopedSlots: { customRender: 'operation' }
        }]
    }
  },
  components: {
    RoleInfo,
    SetPermission
  },
  methods: {
    openPermission (record) {
      this.currentRecord = record
      this.permissionVisible = true
    },
    closePermissionModal () {
      this.permissionVisible = false
    },
    closeInfoModal (freshTable) {
      this.infoVisible = false
      if (freshTable) {
        this.$refs.searchtable.refreshTable()
      }
    },
    openInfo (record) {
      this.currentRecord = record
      this.infoVisible = true
    },
    deleteRows (ids) {
      if (!ids || ids.length === 0) return this.$message.warn('请先选择一项后再进行操作')
      this.$confirm({
        title: '删除提示',
        content: '删除操作不可恢复，请确认是否删除？',
        okText: '确认删除',
        cancelText: '取消',
        onOk: () => {
          this.$post('/sys/roles/delete', ids).then(res => {
            if (res && res.returnCode == 1000) {
              this.$message.success('删除成功')
              this.$refs.searchtable.refreshTable()
            }
          })
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>

</style>
